<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>用户列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
</head>
<body>
<div class="userDiv">
<br/>
  昵称：
  <div class="layui-inline">
    <input class="layui-input" name="nickname" id="nickname" autocomplete="off"/>
  </div>
  真实姓名：
  <div class="layui-inline">
    <input class="layui-input" name="realname" id="realname" autocomplete="off"/>
  </div>
 手机：
 <div class="layui-inline">
   <input class="layui-input" name="phone" id="phone" autocomplete="off"/>
 </div>
 邮箱：
  <div class="layui-inline">
    <input class="layui-input" name="email" id="email" autocomplete="off"/>
  </div>
 地址：
  <div class="layui-inline">
    <input class="layui-input" name="address" id="address" autocomplete="off"/>
  </div> 
  性别：  
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="sex" id="sex" autocomplete="off">
    		  <option value="">--请选择--</option>
              <option value="0">女</option>
              <option value="1">男</option>
    </select>
    </form>
  </div>
   
  <button class="layui-btn" data-type="reload">搜索</button>
</div>


<table class="layui-hide" id="userTable" lay-filter="tableFilter"></table>
 
<script src="/layui.js"></script>
<script>
/*<![CDATA[*/
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#userTable'
    ,height: 'full'                   
    ,url: '/admin/getAuthUser' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {field: 'username', title: '用户名', width:100, align:'center'}
      ,{field: 'nickname', title: '昵称', width:120, align:'center'}
      ,{field: 'realname', title: '真实姓名', width:85, align:'center'}
      ,{field: 'sexName', title: '性别', width:60, align:'center'}
      ,{field: 'idcard', title: '身份证号', width:200, align:'center'}
      ,{field: 'address', title: '地址', width:130, align:'center'}
      ,{field: 'phone', title: '手机号', width:155, align:'center'}
      ,{field: 'email', title: '邮箱', width:180, align:'center'}
      ,{field: 'regDate', title: '注册时间', width:150, align:'center'}
      ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]]
    ,id: 'userReload'
   	,done: function(res, page, count){
           //如果是异步请求数据方式，res即为你接口返回的信息。  
           //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  

   } 
  });
    
    //条件查询
	var $ = layui.$, active = {
		reload : function() {
			var nickname = $('#nickname').val().trim();
			var realname = $('#realname').val().trim();
			var phone = $('#phone').val().trim();
			var email = $('#email').val().trim();
			var address = $('#address').val().trim();
			var sex = $('#sex').val().trim();
			var jsonString = "";
			
			var i = 0;
			jsonString = "{";
			if(nickname!=null&&nickname!=""){
				i++;
				jsonString = jsonString + "nickname:'" + nickname + "'";
			}
			if(realname!=null&&realname!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "realname:'" + realname  + "'";
			}
			if(phone!=null&&phone!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "phone:'" + phone  + "'";
			}
			if(email!=null&&email!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "email:'" + email  + "'";
			}
			if(address!=null&&address!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "address:'" + address  + "'";
			}
			if(sex!=null&&sex!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "sex:'" + sex  + "'";
			}
			jsonString = jsonString + "}"
			/*]]>*/
			
			//执行重载
			table.reload('userReload', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
						jsonString : jsonString
				}
			});
		}
	};

	$('.userDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'pass'){
		    layer.confirm('同意实名？', function(index){
		    	var id = data.id;
		    	$.ajax({
        	        url: "/admin/authUser/",
        	        type: "POST",
        	        data:{id:id,authProcess:1},
        	        success: function (d) {
        	        	if(d.rspCode=="000000"){
        	        		obj.del();
	        			    layer.msg('审核成功');
        	        	}else{
	        			    layer.msg('审核失败');
        	        	}
        	        },
        	        error: function (d) {
        	        	layer.alert('请重试..', {
						      title: '错误提示'
						    });
        	        }
        	   });
		    });
		  } else if(layEvent === 'edit'){ //编辑
		    //do something
			    layer.open({
			        type: 2,
			        title: '编辑',
			        area : ['800px' , '520px'], 
			        scrollbar: false,//禁止浏览器滚动
		        }); 
		    //同步更新缓存对应的值
		    /* obj.update({
		      username: '123'
		      ,title: 'xxx'
		    }); */
		  }
		});
	
});
</script>

</body>

<script type="text/html" id="handler">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="pass">审核实名</a>
</script>
</html>